<!--  -->
<template>
  <div class="container">
    <div class="app-container">
      <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="关 键 字">
                <el-input
                  v-model.trim="searchObj.username"
                  style="width: 95%"
                  placeholder="登录用户"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作时间">
                <el-date-picker
                  v-model="createTimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="margin-right: 10px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="display: flex">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="fetchData()"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetData"
            >重置</el-button>
          </el-row>
        </el-form>
      </div>
      <br />
      <el-table :data="list" style="width: 100%" border>
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="登录账号" align="center" />
        <el-table-column prop="ipaddr" label="登录IP地址" align="center" />
        <el-table-column prop="status" label="登录状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '成功' : '失败' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="msg" label="提示消息" align="center" />
        <el-table-column prop="createTime" label="登录时间" align="center" :formatter="cidformatter" />
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="limit" @current-change="fetchData" />
    </div>
  </div>
</template>

<script>
import api from '@/api/loginLog'
export default {
  data() {
    return {
      list: [],
      page: 1,
      limit: 5,
      total: 0,
      searchObj: {},
      createTimes: [],
      listLoading: false,
      dialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    cidformatter(row, column) {
      const date = new Date(row.createTime || row.updateTime)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hour = date.getHours().toString().padStart(2, '0')
      const minute = date.getMinutes().toString().padStart(2, '0')
      const second = date.getSeconds().toString().padStart(2, '0')
      const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      return formattedDate
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 调用接口删除
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    fetchData(page = 1) {
      this.page = page
      if (this.createTimes && this.createTimes.length === 2) {
        this.searchObj.createTimeBegin = this.createTimes[0]
        this.searchObj.createTimeEnd = this.createTimes[1]
      }

      api
        .getLoginLogPageInfo(this.page, this.limit, this.searchObj)
        .then((response) => {
          // this.list = response.data.list
          this.list = response.data.records
          this.total = response.data.total
          // 数据加载并绑定成功
          this.listLoading = false
        })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>
